<template>
	<div class="remenshangping">
		<div class="remenshang">
			<ul>
				<li>
					<router-link :to="'/home/'+luyoushu+'/remenshangping/haowubang'">
						好物榜
					</router-link>
				</li>
				<li>
					<router-link :to="'/home/'+luyoushu+'/remenshangping/fangkebang'">
						访客榜
					</router-link>
				</li>
				<li>
					<router-link :to="'/home/'+luyoushu+'/remenshangping/xiaoliangbang'">
						销量榜
					</router-link>
				</li>
				<li>
					<router-link :to="'/home/'+luyoushu+'/remenshangping/qianlibang'">
						潜力榜
					</router-link>
				</li>
			</ul>
		</div>
		
		<div class="ziluyou">
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default{
		name:'remenshangping',
		data(){
			return{
				luyoushu:'',
				luyou:''
			}
		},
		created:function(){
			//获取当前路由，方便跳转子路由
			this.luyoushu=this.$route.path.split("/")[2];
		},
		activated(){
			this.$router.push(this.luyou)
		},
		//切换页面也不会默认选中第一个子路由
		beforeRouteLeave(to,from,next){
			//活跃的路由
			this.luyou=this.$route.path
			next();
		},
		mounted:function(){
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.remenshangping{
		
		.remenshang{
			background-color: #fff;
			padding: 0.8rem 0 0 0;
			border-bottom:1px solid #E7E7E7 ;
			border-top-left-radius:0.1rem ;
			border-top-right-radius:0.1rem ;
			
			ul{
				list-style: none;
				padding-left:1rem ;
				
				li{
					cursor: pointer;
					margin: 0 1rem;
					float: left;
					
					a{
						color: #333333;
						font-size: 0.5rem;
						text-decoration: none;
						display: block;
						padding: 1rem 0.4rem;
					}
					.router-link-active{
						transition: all 0.1s ease;
						color: #0091FF;
						border-bottom:2px solid #0091FF ;
					}
				}
			}
			ul::after{
				content: "";
				display: block;
				clear: both;
			}
		}
	}
</style>
